<template>
  <el-card class="box-card" style="width: 50%">
    <el-form
      :model="user"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
    <div style="text-align: center; margin-bottom: 15px;">
    <el-upload
      class="avatar-uploader"
      action="http://localhost:8080/file/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      >
      <img v-if="user.avatar" :src="user.avatar" class="avatar" alt="">
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" placeholder="用户名" style="margin-right: 90px;" />
      </el-form-item>
      <el-form-item label="电话" prop="phone" >
        <el-input v-model="user.phone" placeholder="电话" style="margin-right: 90px;"/>
      </el-form-item>
      <el-form-item label="性别">
      <el-radio-group v-model="user.sex">
        <el-radio label="男" />
        <el-radio label="女" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
        <el-input v-model="user.email" placeholder="邮箱" style="margin-right: 90px;" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input type="textarea" v-model="user.address" placeholder="地址" style="margin-right: 90px;" />
      </el-form-item>
      <div style="text-align: center; margin-top: 15px;">
        <el-button  type="primary" @click="save"> 保存 </el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script>
import {updateUser} from "../../api/index"; 
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user")),
    };

  },
  methods:{
    save(){
      //保存当前的用户信息到数据库
      updateUser(this.user).then(res=>{
        if(res.code==='200'){
          this.$message.success("保存成功")

          //更新浏览器缓存里的用户信息
          localStorage.setItem("user",JSON.stringify(this.user))

        }else{
          this.$message.error(res.message);
        }
      })
    },
    handleAvatarSuccess(response,file,fileList){
      //把user的头像属性换成上传的图片的链接
      this.user.avatar = response.data
    }
  }
};
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 300px;
  height: 300px;
  display: block;
  border-radius: 50%;
  border: 0px solid #00000000;
}
.el-upload-dragger{
  border: 0px solid #00000000;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  border: 0px solid #00000000;
}

.avatar-uploader .el-upload:hover {
  border: 0px solid #00000000;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 300px;
  text-align: center;
  border-radius: 50%;
}
.block{
  display: flex;
  justify-content: center;
}
.el-form-item__label{
  font-weight: bold;
}

</style>